<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务节点列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../static/css/element-ui-2.6.14.css">
    <style>
        .el-header{
            color: #333;
            padding: 11px;
            background: white;
            margin: 0 0 5px 0;
        }
        .el-main {
            color: #333;
            padding: 0;
            background:white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-form :inline="true" :model="serverNodeQueryForm" class="demo-form-inline">
                    <el-form-item label="服务节点">
                        <el-input v-model="serverNodeQueryForm.server" clearable placeholder="服务节点"></el-input>
                    </el-form-item>
                    <el-form-item label="注册类型">
                        <el-select v-model="serverNodeQueryForm.type" clearable placeholder="注册类型">
                            <el-option
                                v-for="(item,key) in SysServerType"
                                :key="key"
                                :label="item"
                                :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="serverNodeQueryForm.status" clearable placeholder="状态">
                            <el-option
                                v-for="(item,key) in SysServerStatus"
                                :key="key"
                                :label="item"
                                :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="initSysServerNodes">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-row>
                    <el-col :offset="22" :span="2">
                        <el-button style="margin:10px 0;" type="primary" size="mini" v-if="auth.add" icon="el-icon-plus" @click="openCreateDialog">手动注册</el-button>
                    </el-col>
                </el-row>
                <el-table
                        :data="sysServerNodes"
                        border
                        :header-cell-style="getRowClass"
                        style="width:98%;margin:0 10px;">
                    <el-table-column
                            prop="id"
                            label="ID"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="server"
                            label="服务节点"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="注册类型"
                            width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type=='MANUAL'">手动注册</span>
                            <span v-if="scope.row.type=='AUTO'" style="color:#409EFF;">自动注册</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            align="center"
                            width="100">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status=='ONLINE'" type="success">在线</el-tag>
                            <el-tag v-if="scope.row.status=='OFFLINE'" type="danger">离线</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="statusUpdateTime"
                            label="状态更新时间"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="note"
                            label="描述">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="220">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" v-if="auth.taskList" @click="initSysServerNodeTaskList(scope.row)">任务列表</el-button>
                            <el-button type="text" size="mini" v-if="auth.pullTask" @click="pullSysServerNodeTask(scope.row)">拉取任务</el-button>
                            <el-button type="text" size="mini" v-if="auth.update" @click="openUpdateDialog(scope.row)">修改</el-button>
                            <el-button type="text" size="mini" v-if="auth.delete" @click="openDeleteDialog(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.page"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                </el-pagination>
            </el-main>
        </el-container>


        <!-- 对话框 新增-->
        <el-dialog title="创建服务节点" :visible.sync="createDialogVisible" :close-on-click-modal="false">
            <el-form :model="createForm" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="服务节点">
                            <el-input v-model="createForm.server" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="注册类型">
                            <el-radio disabled v-model="createForm.type" label="MANUAL">手动注册</el-radio>
                            <el-radio disabled v-model="createForm.type" label="AUTO">自动注册</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="描述">
                            <el-input v-model="createForm.note" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="createDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="createSysServerNode">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 对话框 修改-->
        <el-dialog title="修改服务节点" :visible.sync="updateDialogVisible" :close-on-click-modal="false">
            <el-form :model="updateForm" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="服务节点">
                            <el-input v-model="updateForm.server" disabled autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="注册类型">
                            <el-radio disabled v-model="updateForm.type" label="MANUAL">手动注册</el-radio>
                            <el-radio disabled v-model="updateForm.type" label="AUTO">自动注册</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="描述">
                            <el-input v-model="updateForm.note" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateSysServerNode">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 对话框 任务列表-->
        <el-dialog title="任务列表" :visible.sync="taskListDialogVisible" width="90%" :close-on-click-modal="false">
            <el-table
                    :data="sysServerNodeTaskList"
                    border
                    :header-cell-style="getRowClass"
                    style="width:98%;margin:0 10px;">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="server"
                        label="服务节点"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="beanName"
                        label="模块"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="methodName"
                        label="方法"
                        width="160">
                </el-table-column>
                <el-table-column
                        label="方法描述"
                        prop="methodDesc"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="methodParams"
                        label="参数"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="160">
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="taskHandleSizeChange"
                    @current-change="taskHandleCurrentChange"
                    :current-page="taskPage.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="taskPage.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="taskPage.total">
            </el-pagination>
        </el-dialog>
    </div>

<script type="text/javascript" src="../static/js/vue.min-2.6.14.js"></script>
<!-- 引入组件库 -->
<script src="../static/js/element-ui-2.15.6.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="../static/js/app.js"></script>
<script>

    new Vue({
        el: '#app',
        data:{
            sysServerNodes:[],

            SysServerType: [],
            SysServerStatus:[],

            serverNodeQueryForm:{
                server: '',
                type: '',
                status: ''
            },

            page:{
                page:1,
                pageSize:10,
                total:0
            },

            createDialogVisible:false,
            createForm:{
                type: 'MANUAL'
            },

            updateForm:{},
            updateDialogVisible:false,

            taskListDialogVisible: false,
            sysServerNodeTaskList: [],
            taskPage:{
                page:1,
                pageSize:10,
                total:0
            },
            auth:{
                menuCode:'server_node',
                add:false,
                update:false,
                delete: false,
                pullTask: false,
                taskList: false
            }
        },
        created(){
            initAuth(this.auth);
        },
        mounted(){
            this.initSysServerNodes();
            this.initEnumList();
        },
        methods: {
            initSysServerNodes(){
                axios.post(domain + "/sysServerNode/querySysServerNodeByPage",{
                    page:this.page.page,
                    pageSize:this.page.pageSize,
                    server: this.serverNodeQueryForm.server,
                    type: this.serverNodeQueryForm.type,
                    status: this.serverNodeQueryForm.status

                }).then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.sysServerNodes = res.data.rows;
                        this.page.total = res.data.records;
                    }else {
                        notify(resp)
                    }

                });
            },
            handleSizeChange(val){
                if(this.page.pageSize != val){
                    this.page.pageSize = val;
                    this.initSysServerNodes();
                }
            },
            handleCurrentChange(val){
                if(this.page.page != val){
                    this.page.page = val;
                    this.initSysServerNodes();
                }
            },
            getRowClass({ rowIndex }){
                if (rowIndex == 0) {
                    return 'background:RGB(238,239,246)'
                } else {
                    return ''
                }
            },
            openCreateDialog(){
                this.createDialogVisible = true;
            },
            createSysServerNode(){
                axios.post(domain + "/sysServerNode/saveServerNode",this.createForm).then(resp=>{
                    if (notifyAndReloadAndDialog(this, resp, "initSysServerNodes", "createDialogVisible")) {
                        this.createForm = {};
                    }
                });
            },
            openUpdateDialog(row){
                axios.get(domain + "/sysServerNode/getServerNodeById",{
                    params:{
                        id:row.id
                    }
                }).then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.updateForm = res.data;
                        this.updateDialogVisible = true;
                    }else {
                        notify(resp)
                    }
                });
            },
            updateSysServerNode(){
                axios.post(domain + "/sysServerNode/updateServerNode",this.updateForm).then(resp=>{
                    if (notifyAndReloadAndDialog(this, resp, "initSysServerNodes", "updateDialogVisible")) {
                        this.updateForm = {};
                    }
                });
            },
            openDeleteDialog(row) {
                this.$confirm('此操作删除与该节点相关的所有数据, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.deleteSysServerNode(row)
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });
                });
            },
            deleteSysServerNode(row){
                axios.post(domain + "/sysServerNode/deleteSysServerNode","id="+row.id).then(resp=>{
                    notifyAndReload(this, resp, "initSysServerNodes");
                });
            },
            initEnumList(){
                axios.get(domain + "/sysServerNode/getScheduleEnumList").then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.SysServerType = res.data.SysServerType;
                        this.SysServerStatus = res.data.SysServerStatus;
                    }else {
                        notify(resp)
                    }
                });
            },
            pullSysServerNodeTask(row){
                axios.get(domain + "/sysServerNodeTask/pullSysServerNodeTask?id="+row.id).then(resp=>{
                    notify(resp);
                });
            },
            initSysServerNodeTaskList(row){
                this.taskListDialogVisible = true;
                axios.post(domain + "/sysServerNodeTask/querySysServerNodeTaskByPage",{
                    page:this.taskPage.page,
                    pageSize:this.taskPage.pageSize,
                    server: row.server,
                    beanName: row.beanName,
                    methodName: row.methodName

                }).then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.sysServerNodeTaskList = res.data.rows;
                        this.taskPage.total = res.data.records;
                    }else {
                        notify(resp)
                    }

                });
            },
            taskHandleSizeChange(val){
                if(this.taskPage.pageSize != val){
                    this.taskPage.pageSize = val;
                    this.initSysServerNodeTaskList();
                }
            },
            taskHandleCurrentChange(val){
                if(this.taskPage.page != val){
                    this.taskPage.page = val;
                    this.initSysServerNodeTaskList();
                }
            },
        }
    });

</script>
</body>
</html>
